<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学习内容设置</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
    <link rel="stylesheet"  th:href="@{/static/css/webuploader.css}">
    <style>
        .upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;}
        .percentage{height: 5px; background: green;}
        .btn-delete, .btn-retry{cursor: pointer; color: gray;}
        .btn-delete:hover{color: orange;}
        .btn-delete{
            margin: 10px;
        }
        .btn-retry:hover{color: green;}
    </style>
</head>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div>
                <h1 th:text="${book_name}"></h1>
                <h1 th:text="${menu_topic}"></h1>
                <form class="layui-form layui-form-pane" method="post" id="form" enctype="multipart/form-data">
                    <input name="book_name" id="book_name" th:value="${book_name}" th:type="hidden">
                    <input name="menu_topic" id="menu_topic" th:value="${menu_topic}" th:type="hidden">

                    <!-- 上传大视频-->
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>上传视频</legend>
                    </fieldset>+
                    <div id="upload-video">
                        <span class="layui-btn">点击上传视频</span>
                        <input type="text" class="layui-input" name="video" id="videoName" th:type="hidden">
                    </div>
                    <div id="upload-videolist"></div>
                    <button id="videoListAction" name="videoListAction" style="display: none;">点击上传文件</button>

                    <!--上传ppt-->
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>导入课件</legend>
                    </fieldset>
                    <div id="upload-ppt" style="margin-top: 20px;">
                        <span class="layui-btn">点击上传ppt</span>
                        <input type="text" class="layui-input" name="ppt" id="pptName" th:type="hidden">
                    </div>
                    <div id="upload-pptlist"></div>
                    <button id="pptListAction" name="pptListAction" style="display: none;">点击上传课件</button>

                    <!-- 导入选择题 -->
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>导入选择题</legend>
                    </fieldset>

                    <div id="upload-option" style="margin-top: 20px;">
                        <span class="layui-btn">导入选择题</span>
                        <input type="text" class="layui-input" name="option" id="optionName" th:type="hidden">
                    </div>
                    <div id="upload-optionlist"></div>
                    <button id="optionListAction" name="optionListAction" style="display: none;">点击上传文件</button>

                    <!-- 导入填空题 -->
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend>导入填空题</legend>
                    </fieldset>

                    <div id="upload-fillin" style="margin-top: 20px;">
                        <span class="layui-btn">导入填空题</span>
                        <input type="text" class="layui-input" name="option" id="fillinName" th:type="hidden">
                    </div>
                    <div id="upload-fillinlist"></div>
                    <button id="fillinListAction" name="optionListAction" style="display: none;">点击上传文件</button>


                </form>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:src="@{/static/js/jquery-1.11.1.js}"></script>
<script th:src="@{/static/js/webuploader.js}"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<!--视频文件的上传-->
<script>

    $('#upload-video').click(function(event) {
        $("#videoListAction").find('input').click();
    });

    var book_name = $("#book_name").val()
    var menu_topic = $("#menu_topic").val()

    var uploader = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/Uploader.swf',// swf文件路径
        server: '/video/upload/'+book_name+"/"+menu_topic,// 文件接收服务端。
        dnd: '#upload-video',
        pick: '#videoListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        // fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        // fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
    })

    uploader.on("beforeFileQueued", function(file) {
        // 更改文件名，以时间戳命名
        console.log(file); // 获取文件的后缀
        var timestamp = Date.parse(new Date())
        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)
        console.log(file.name)
    });

    uploader.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext); // 获取文件的后缀
        console.log(file.size);// 获取文件的大小
        console.log(file.name);
        console.log(file.id);
        console.log(file.lastModifiedDate)

        //截取单纯的文件名

        var html = '<div class="upload-item" id="'+file.id+'">' +
            '<span>文件名：'+file.name+'</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+
            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +
            '</div>';
        $('#upload-videolist').append(html);
        uploader.md5File( file )//大文件秒传
            // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })

            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });

    //上传进度显示
    uploader.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    //上传成功
    uploader.on('uploadSuccess', function(file, response) {
        //更新input框中的文件
        var front = $('#videoName').val()
        var videoName = front + file.lastModifiedDate +"." + file.ext + ","
        $('#videoName').val(videoName)
        console.log(file.id+"传输成功");

    });

    //上传失败
    uploader.on('uploadError', function(file) {
        //更新input框中的文件
        var file_name = file.name
        var videoName = file_name
        var front = $('#videoName').val()
        var frontList = front.split(",");
        var videoNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( videoName != frontList[i] ){
                videoNames += frontList[i] + ",";
            }
        }
        $("#videoName").val(videoNames)
        console.log(file);
        console.log(file.id+'upload error')
    });

    //将文件删除
    $('#upload-videolist').on('click', '.upload-item .btn-delete', function(file) {

        //更新input框中的文件
        var file_name = $(this).data('file_name')
        var videoName = file_name
        var front = $('#videoName').val()
        var frontList = front.split(",");
        var videoNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( videoName != frontList[i] ){
                videoNames += frontList[i] + ",";
            }
        }
        $("#videoName").val(videoNames)

        // 从文件队列中删除某个文件id
        var file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader.removeFile(file_id, true); // 从queue中删除

        //将文件从文件列表中删除
        var obj = document.getElementById(file_id)
        obj.parentNode.removeChild(obj)


        //打印文件
        // console.log(uploader.getFiles());
        // console.log(file_id)
        // console.log(file_name)
        // console.log(file.ext)
    });
    //文件的重传
    $('#upload-videolist').on('click', '.btn-retry', function() {
        uploader.retry($(this).data('file_id'));
    });

    uploader.on('uploadComplete', function(file) {
        console.log(uploader.getFiles());
    });
</script>

<!--ppt文件上传-->
<script>

    var chapterNo = $("#chapterNo").val()

    $('#upload-ppt').click(function(event) {
        $("#pptListAction").find('input').click();
    });

    var uploader2 = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/Uploader.swf',// swf文件路径
        server: '/video/fileUpload/'+book_name+"/"+menu_topic,// 文件接收服务端。
        // dnd: '#upload-ppt',
        pick: '#pptListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        // fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        // fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
    })

    uploader2.on("beforeFileQueued", function(file) {
        // 更改文件名，以时间戳命名
        console.log(file); // 获取文件的后缀
        var timestamp = Date.parse(new Date())
        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)
        console.log(file.name)
    });

    uploader2.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext); // 获取文件的后缀
        console.log(file.size);// 获取文件的大小
        console.log(file.name);
        console.log(file.id);
        console.log(file.lastModifiedDate)

        //截取单纯的文件名

        var html = '<div class="upload-item" id="'+file.id+'">' +
            '<span>文件名：'+file.name+'</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+
            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +
            '</div>';
        $('#upload-pptlist').append(html);
        uploader2.md5File( file )//大文件秒传
            // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })

            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });

    //上传进度显示
    uploader2.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    //上传成功
    uploader2.on('uploadSuccess', function(file, response) {
        //更新input框中的文件
        var front = $('#pptName').val()
        var pptName = front + file.lastModifiedDate +"." + file.ext + ","
        $('#pptName').val(pptName)
        console.log(file.id+"传输成功");
    });

    //上传失败
    uploader2.on('uploadError', function(file) {
        //更新input框中的文件
        var file_name = file.name
        var pptName = file_name
        var front = $('#pptName').val()
        var frontList = front.split(",");
        var pptNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( pptName != frontList[i] ){
                pptNames += frontList[i] + ",";
            }
        }
        $("#pptName").val(pptNames)
        console.log(file);
        console.log(file.id+'upload error')
    });

    //将文件删除
    $('#upload-pptlist').on('click', '.upload-item .btn-delete', function(file) {

        //更新input框中的文件
        var file_name = $(this).data('file_name')
        var pptName = file_name
        var front = $('#pptName').val()
        var frontList = front.split(",");
        var pptNames = "";
        for (var i=0; i<frontList.length-1; i++){
            if ( pptName != frontList[i] ){
                pptNames += frontList[i] + ",";
            }
        }
        $("#pptName").val(pptNames)

        // 从文件队列中删除某个文件id
        var file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader2.removeFile(file_id, true); // 从queue中删除

        //将文件从文件列表中删除
        var obj = document.getElementById(file_id)
        obj.parentNode.removeChild(obj)


        //打印文件
        // console.log(uploader.getFiles());
        // console.log(file_id)
        // console.log(file_name)
        // console.log(file.ext)
    });

    //文件的重传
    $('#upload-pptlist').on('click', '.btn-retry', function() {
        uploader2.retry($(this).data('file_id'));
    });

    uploader2.on('uploadComplete', function(file) {
        console.log(uploader2.getFiles());
    });
</script>

<!--导入选择题-->
<script>

    $('#upload-option').click(function(event) {
        $("#optionListAction").find('input').click();
    });
    var uploader2 = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        swf: '/static/Uploader.swf',// swf文件路径
        server: '/excelUpload/importOption/'+book_name+"/"+menu_topic,       // 文件接收服务端。
        // dnd: '#upload-ppt',
        pick: '#optionListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
        accept: 'file',
    })

    uploader2.on("beforeFileQueued", function(file) {
        // 更改文件名，以时间戳命名
        console.log(file.exit); // 获取文件的后缀
        var timestamp = Date.parse(new Date())
        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)
        console.log(file.name)
    });

    uploader2.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext); // 获取文件的后缀
        console.log(file.size);// 获取文件的大小
        console.log(file.name);
        console.log(file.id);
        console.log(file.lastModifiedDate)

        //截取单纯的文件名

        var html = '<div class="upload-item" id="'+file.id+'">' +
            '<span>文件名：'+file.name+'</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+
            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +
            '</div>';
        $('#upload-optionlist').append(html);
        uploader2.md5File( file )//大文件秒传
            // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })

            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });

    //上传进度显示
    uploader2.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    //上传成功
    uploader2.on('uploadSuccess', function(file, response) {
        console.log(file.id+"传输成功");
    });

    //上传失败
    uploader2.on('uploadError', function(file) {
        console.log(file);
        console.log(file.id+'upload error')
    });

    //将文件删除
    $('#upload-optionlist').on('click', '.upload-item .btn-delete', function(file) {

        // 从文件队列中删除某个文件id
        var file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader2.removeFile(file_id, true); // 从queue中删除

        //将文件从文件列表中删除
        var obj = document.getElementById(file_id)
        obj.parentNode.removeChild(obj)


        打印文件
        console.log(uploader.getFiles());
        console.log(file_id)
        console.log(file_name)
        console.log(file.ext)
    });

    //文件的重传
    $('#upload-optionlist').on('click', '.btn-retry', function() {
        uploader2.retry($(this).data('file_id'));
    });

    uploader2.on('uploadComplete', function(file) {
        console.log(uploader2.getFiles());
    });
</script>

<!--导入填空题-->
<script>

    var chapterNo = $("#chapterNo").val()

    $('#upload-fillin').click(function(event) {
        $("#fillinListAction").find('input').click();
    });
    var uploader2 = WebUploader.create({
        auto: true,// 选完文件后，是否自动上传。
        // swf: '/static/Uploader.swf',// swf文件路径
        server: '/excelUpload/importFillin/'+book_name+"/"+menu_topic,       // 文件接收服务端。
        // dnd: '#upload-ppt',
        pick: '#fillinListAction',// 内部根据当前运行是创建，可能是input元素，也可能是flash. 这里是div的id
        multiple: true, // 选择多个
        chunked: true,// 开启分片上传。
        threads: 1, // 上传并发数。允许同时最大上传进程数。
        method: 'POST', // 文件上传方式，POST或者GET。
        fileSizeLimit: 1024*1024*1024*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit: 1024*1024*1024, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileVal: 'upload', // [默认值：'file'] 设置文件上传域的name。
        accept: 'file',
    })

    uploader2.on("beforeFileQueued", function(file) {
        // 更改文件名，以时间戳命名
        console.log(file); // 获取文件的后缀
        var timestamp = Date.parse(new Date())
        file.lastModifiedDate = timestamp.toString().substring(0,timestamp.toString().length-3)
        console.log(file.name)
    });

    uploader2.on('fileQueued', function(file) {
        // 选中文件时要做的事情，比如在页面中显示选中的文件并添加到文件列表，获取文件的大小，文件类型等
        console.log(file.ext); // 获取文件的后缀
        console.log(file.size);// 获取文件的大小
        console.log(file.name);
        console.log(file.id);
        console.log(file.lastModifiedDate)

        //截取单纯的文件名

        var html = '<div class="upload-item" id="'+file.id+'">' +
            '<span>文件名：'+file.name+'</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'" class="btn-delete">删除</span>' +
            '<span data-file_id="'+file.id+'" data-file_name="'+file.lastModifiedDate+'.'+file.ext+'"  class="btn-retry">重试</span>'+
            '<div class="percentage '+file.id+'" style="width: 0%;"></div>' +
            '</div>';
        $('#upload-fillinlist').append(html);
        uploader2.md5File( file )//大文件秒传
            // 及时显示进度
            .progress(function(percentage) {
                console.log('Percentage:', percentage);
            })

            // 完成
            .then(function(val) {
                console.log('md5 result:', val);
            });
    });

    //上传进度显示
    uploader2.on('uploadProgress', function(file, percentage) {
        console.log(percentage * 100 + '%');
        var width = $('.upload-item').width();
        $('.'+file.id).width(width*percentage);
    });

    //上传成功
    uploader2.on('uploadSuccess', function(file, response) {
        //更新input框中的文件
        console.log(file.id+"传输成功");
    });

    //上传失败
    uploader2.on('uploadError', function(file) {

        console.log(file);
        console.log(file.id+'upload error')
    });

    //将文件删除
    $('#upload-fillinlist').on('click', '.upload-item .btn-delete', function(file) {

        // 从文件队列中删除某个文件id
        var file_id = $(this).data('file_id');
        // uploader.removeFile(file_id); // 标记文件状态为已取消
        uploader2.removeFile(file_id, true); // 从queue中删除

        //将文件从文件列表中删除
        var obj = document.getElementById(file_id)
        obj.parentNode.removeChild(obj)

    });

    //文件的重传
    $('#upload-fillinlist').on('click', '.btn-retry', function() {
        uploader2.retry($(this).data('file_id'));
    });

    uploader2.on('uploadComplete', function(file) {
        console.log(uploader2.getFiles());
    });
</script>

</body>
</html>